<template>
  <div id="carousel">
    <Carousel autoplay v-model="idx" :height="heights">
      <Carousel-item v-for="caro in carousels">
        <div class="baguetteBox">
          <a :href="caro">
            <img :src="caro">
          </a>
        </div>
      </Carousel-item>
    </Carousel>
  </div>
</template>
<script>
  export default {
    name: 'carousel',
    props: ['index', 'carousels', 'height'],
    data () {
      return {
        idx: (this.indent) ? this.index : 0,
        heights: (this.height) ? this.height : 'auto'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  #carousel{
    img{
      width: 100%
      height: 375px
    }
  }
</style>
